<!--  -->
<template>
  <div class='article-comment'>
    <div class="article-comment-input">
      <h2>发表评论</h2>
      <div>
        <Input
          v-model="commentContent"
          type="textarea"
          :autosize="{minRows: 5,maxRows: 5}"
          placeholder="输入评论......"
        />
      </div>
      <div style="margin-top: 10px;">
        <Button
          class="send-button"
          type="primary"
          @click="sendComment"
          long
        >发送</Button>
      </div>
    </div>
    <div class="article-comment-content">
      <ul>
        <li
          v-for="comment in commentList"
          :key="comment.id"
          style="min-height: 80px;list-style-type:none"
        >
          <div>
            <img
              src="../../assets/tou.jpg"
              style="width: 65px;height: 65px;float: left;border-radius: 50%"
            />
            <div class="user-comment-content">
              <div>
                {{comment.title}}
              </div>
              <div>
                {{comment.createTime}}
              </div>
              <div>
                {{comment.content}}
              </div>
            </div>
          </div>
          <Divider />
        </li>
      </ul>
      <my-more></my-more>
    </div>
  </div>
</template>

<script>
import MyMore from '../home/more'
export default {
  data () {
    return {
      commentName: '',
      commentContent: '',
      columnList: [
        {
          key: '评论',
          name: '评论'
        }
      ],
      commentList: [
        {
          id: 1,
          title: '游客1',
          createTime: '2019年1月9日 23:14:26',
          content: '我是123'
        },
        {
          id: 2,
          title: '游客2',
          createTime: '2019年1月9日 23:14:26',
          content: '我是123'
        },
        {
          id: 3,
          title: '游客3',
          createTime: '2019年1月9日 23:14:26',
          content: '我是123'
        },
        {
          id: 4,
          title: '游客4',
          createTime: '2019年1月9日 23:14:26',
          content: '我是123'
        },
        {
          id: 5,
          title: '游客5',
          createTime: '2019年1月9日 23:14:26',
          content: '我是123'
        },
        {
          id: 6,
          title: '游客5',
          createTime: '2019年1月9日 23:14:26',
          content: '我是123'
        },
        {
          id: 7,
          title: '游客5',
          createTime: '2019年1月9日 23:14:26',
          content: '我是123'
        },
        {
          id: 8,
          title: '游客5',
          createTime: '2019年1月9日 23:14:26',
          content: '我是123'
        },
        {
          id: 9,
          title: '游客5',
          createTime: '2019年1月9日 23:14:26',
          content: '我是123'
        }
      ]
    }
  },
  components: {
    MyMore
  },
  methods: {
    sendComment () { }
  }
}
</script>
<style scoped>
.send-button:hover {
  background-color: darkblue;
}
.user-comment-content {
  margin-left: 80px;
}
.article-comment-content {
  margin: 30px auto;
}

.article-comment {
  margin: 10px auto;
  background-color: white;
  width: 95%;
}
</style>
